<template>
  <div class="order-items">
    <el-table
      v-loading="loading"
      element-loading-text="数据载入中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255,255,255, 0.4)"
      :data="items">
      <el-table-column
        label="活动">
        <template slot-scope="scope">

          {{scope.row.activity.title}}
          <br>
          [{{scope.row.activity.city_name}}]
          <br>
          [第{{scope.row.group_stage.stage_num}}.{{scope.row.group_stage.id}}期]
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="点击复制" placement="top">
            <el-tag
              style="cursor: pointer"
              size="mini"
              type="info"
              v-clipboard:copy="scope.row.order_no"
              v-clipboard:success="onCopySuccess"
              v-clipboard:error="onCopyError"
            >{{scope.row.order_no}}</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        v-if="inArray(status, [3,99])"
        label="支付单号">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="点击复制" placement="top">
            <el-tag
              style="cursor: pointer"
              size="mini"
              type="info"
              v-clipboard:copy="scope.row.pay_no"
              v-clipboard:success="onCopySuccess"
              v-clipboard:error="onCopyError"
            >{{scope.row.pay_no}}</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        label="下单用户">
        <template slot-scope="scope">
          <div style="display: flex;align-items: center;">
            <img :src="scope.row.member.avatar" style="width: 25px;height: 25px;border-radius: 50%" />
            &nbsp;
            {{scope.row.member.nickname}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="下单时间">
        <template slot-scope="scope">
          {{scope.row.create_date}}
        </template>
      </el-table-column>
      <el-table-column
        v-if="inArray(status, [3,99])"
        label="支付时间">
        <template slot-scope="scope">
          {{scope.row.pay_date}}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        width="200px"
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="little"
            @click="showDetail = true; actionOrderNo = scope.row.order_no"
            type="success">详情</el-button>
          <el-button
            size="little"
            @click="cancelByNotPay(scope.row.order_no)"
            v-if="scope.row.status === 1"
            type="danger">取消</el-button>
          <el-button
            size="little"
            @click="cancelByPay(scope.row.order_no, scope.row.pay_method)"
            v-if="scope.row.status === 99"
            type="danger">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages">
      <el-pagination
        background
        @size-change="()=>{}"
        @current-change="currentPage"
        :current-page.sync="page"
        :page-size="size"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <ui-detail
      :order-no="actionOrderNo"
      :show.sync="showDetail"></ui-detail>
  </div>
</template>
<script>
import uiDetail from './detail'
export default {
  components: {
    uiDetail
  },
  props: {
    status: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      actionOrderNo: '',
      showDetail: false,
      page: 1,
      size: 20,
      total: 0,
      loading: false,
      items: []
    }
  },
  watch: {
    $route (route) {
      if (this.$route.params.page) {
        this.page = Number(this.$route.params.page)
      }
      this.getItems()
    },
    status () {
      this.page = 1
      this.items = []
      this.getItems()
    },
    showDetail (val) {
      if (!val) {
        this.getItems()
      }
    }
  },
  methods: {
    /**
     * 页码改变事件
     */
    currentPage (page) {
      this.jump({
        name: 'activity.order.items.' + this.status,
        params: {
          page: page
        }
      })
    },
    /**
     *  取消已支付订单
     */
    cancelByPay (orderNo, payMethod) {
      let notice = '请输入取消理由,'
      switch (payMethod) {
        case 1:
          notice += '资金将原路返回到该用户的微信账户中，并且此操作无法恢复'
          break
        case 2:
          notice += '资金将原路返回到该用户的微信账户中，并且此操作无法恢复'
          break
        case 3:
          notice += '资金将原路返回到该用户的支付宝账户中，并且此操作无法恢复'
          break
      }
      this.$prompt(notice, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (!value) {
          this.toast('请输入取消理由', 'error')
          return false
        }
        this.showLoading()
        this
          .$api
          .activityOrder
          .cancelByPay(orderNo, value)
          .then(r => {
            this.toast('取消成功')
            this.getItems()
          })
      }).catch(() => {})
    },
    /**
     *  未支付时取消订单
     */
    cancelByNotPay (orderNo) {
      this.$prompt('请输入取消理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (!value) {
          this.toast('请输入取消理由', 'error')
          return false
        }
        this.showLoading()
        this
          .$api
          .activityOrder
          .cancelByNotPay(orderNo, value)
          .then(r => {
            this.toast('取消成功')
            this.getItems()
          })
      }).catch(() => {})
    },
    /**
     * @purpose 获取订单列表
     */
    getItems () {
      this.loading = true
      this
        .$api
        .activityOrder
        .items(this.status, this.page, this.size)
        .then(r => {
          this.loading = false
          this.total = r.total
          this.items = r.list
        }).catch(() => {
          this.loading = false
        })
    },
    /**
     * 复制成功回调
     */
    onCopySuccess () {
      this.$message({
        message: '复制成功',
        type: 'success'
      })
    },
    /**
     *  复制失败回调
     */
    onCopyError (e) {
      this.$alert(e.text, '复制失败！请您手动复制下面的文本。', {
        confirmButtonText: '关闭',
        callback: action => {}
      })
    }
  },
  created () {
    this.getItems()
  }
}
</script>
<style scoped lang="sass">
  .detail
    width: 100%
    height: 100%
</style>
